<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2d/3d转换</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			.box {
				width: 100px;
				height: 100px;
				margin: 300px auto 0;
				position: relative;
				transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);
				transform-style: preserve-3d;
				animation: tr 15s linear infinite;
			}

			.box img {
				width: 300px;
				height: 300px;
			}

			@keyframes tr {
				from {
					transform: rotateX(600deg) rotateY(-300deg) rotateZ(600deg);
				}

				to {
					transform: rotateX(1800deg) rotateY(300deg) rotateZ(300deg);
				}
			}

			.box .item {
				width: 300px;
				height: 300px;
				/* border: 1px red solid; */
				text-align: center;
				line-height: 300px;
				font-size: 50px;
				background-color: rgba(255, 255, 255, 0.1);
				position: absolute;
			}

			.box .item:nth-child(1) {
				transform: rotateY(180deg) translateZ(-300px);
			}

			.box .item:nth-child(2) {
				transform: rotateY(90deg) translateX(-150px) translateZ(-150px);
			}

			.box .item:nth-child(3) {
				transform: rotateY(-90deg) translateX(150px) translateZ(-150px);
			}

			.box .item:nth-child(4) {
				transform: rotateX(-90deg) translateY(-150px) translateZ(-150px);
			}

			.box .item:nth-child(5) {
				transform: rotateX(90deg) translateY(150px) translateZ(-150px);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item"><img src="img/0.5jpg.jpg" alt=""></div>
			<div class="item"><img src="img/0.6jpg.jpg" alt=""></div>
			<div class="item"><img src="img/0.9jpg.jpg" alt=""></div>
			<div class="item"><img src="img/126.jpg" alt=""></div>
			<div class="item"><img src="img/124.jpg" alt=""></div>
			<div class="item"><img src="img/125.jpg" alt=""></div>
		</div>
	</body>
</html>
